<template>
  <div class="login-bg">
    <div class="login-wrap">
      <div class="login-box">
        <h5>用户登录</h5>
        <el-form ref="loginForm" :model="loginForm" :rules="rules">
          <el-form-item>
            <el-input v-model="loginForm.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input type="password" v-model="loginForm.password" show-password placeholder="请输入密码"></el-input>
          </el-form-item>          
        </el-form>
        <div class="flex f-be f-mi">
          <el-button style="color:#fff;" type="text" @click="findPsd">找回密码</el-button>
          <el-button class="login-btn" type="primary" @click="handleLogin">GO</el-button>
        </div>
      </div>
    </div>
    <div class="login-info">
      <div class="marg-R1 t-cen">
        <img class="pic" src="../assets/images/xcx1.png" alt="">
        <p class="t-color-w">微信小程序</p>
      </div>
      <div class="marg-R1 t-cen">
        <img class="pic" src="../assets/images/app.png" alt="">
        <p class="t-color-w">安卓APP</p>
      </div>
      <div class="txt">
        <!-- <p class="t-color-w">法律咨询，法律咨询线索共享平台，正义云律平台</p> -->
        <!-- <p class="t-color-w">邮箱:qiaotong@163.com  电话: 400-660-888</p> -->
        <p class="t-color-w">Copyright雍政（辽宁）法律服务有限公司</p>
        <p class="t-color-w">客服电话: 17640013355</p>
        <p class="t-color-w">备案号：辽ICP备2024030705号-2</p>       
      </div>
    </div>
  </div>
</template>
<script>
import { http } from "../assets/js/utils/http"
import { request } from "../assets/js/utils/request"
export default {
  name: 'Login' ,
  data() {   
    return{
      loginForm: {
        phone: '',
        password: ''
      },
      rules: {
        phone: [{ required: true,message: '请输入手机号',trigger: 'blur'}],
        password: [{ required: true,message: '请输入密码',trigger: 'blur'}]
      }
    }
  },
  created() {
    // this.getCode()
  },
  methods: {
    findPsd() {
      this.$router.push({
        path: '/psdFind'
      })
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          const formData = new FormData();
          formData.append('phone',this.loginForm.phone);
          formData.append('password',this.loginForm.password)
          http({
            url: '/login',
            method: 'POST',
            data: formData,
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }).then(res => {
            if(res.code == 200) {
              this.getUserInfo()
              this.$store.commit('setToken', res.data.token)
              localStorage.setItem('token',res.data.token)
            } else {
              this.$message.error(res.message)
            }
          }).catch((error) => {
            console.log(error,'ffff')
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getUserInfo() {
      request({
        url: `/user/info`,
        method: 'GET'
    }).then(res => {
      if(res.code == 200) {
        this.$store.commit('setShopId',res.data.is_shop)
        localStorage.setItem('shopId',res.data.is_shop)
        this.$router.push('/')
        this.$message({
          message: '登录成功',
          type: 'success'
        })
      }
    })
    }
  }
}
</script>
<style lang="less" scoped>
.login-bg{
  position: fixed;
  top: 0;
  bottom: 0;
  overflow: hidden;
  width:100%;
  height: 100vh;
  position: relative;
  background: url("../assets/images/bg.png");
  background-size: 100% auto;
  .login-info{
    width: 600px;
    position: absolute;
    left: 50%;
    margin-right: -250px;
    bottom: 50px;
    display: flex;
    .pic{
      width: 60px;
    }
    .txt{
      line-height: 24px;
    }
  }
}
  
.login-wrap{
  width: 400px;
  height: 100vh;
  padding-top: 15%;
  position: relative;
  background: rgba(255,255,255,0.2);  
  /deep/.login-box{
    position: relative;
    width: 240px;
    height: 450px;
    margin: 0 auto;
    border-radius: 8px;
    h5{
      font-size: 16px;
      color: #fff;
      text-align: center;
      margin-bottom: 30px;
    }
    .el-input {
      width: 100%;
      .el-input__inner{
        width: 100%;
        height: 33px;
        border: none;
        background: #ffffff;
        border-radius: 50px;
        height: 38px;
        font-size:14px;
        outline: none;
      }
    }
    .logo{
      text-align: center;
      margin: 20px 0;
      img{
        vertical-align: middle;
      }
      p{
        color: #fff;
        font-size: 24px;
        margin-left: 10px;
      }
    }
    .login-btn{
      padding: 0;
      margin: 0;
      width: 35px;
      height: 18px;
      line-height: 18px;
      text-align: center;
      color: #fff;
      border: none;
      border-radius: 20px;
      background: #4c4c4c;
    }
  }
  
}
</style>